// 方法1：获取页面的元素
// 第一种方式：
// var _ = function(selector){
//     // 返回个元素
//     return document.querySelector(selector);
// }

// 第二种方式：
// document.getElementById(id)
// document.getElementsClassName(类名)
// document.getElementsTagName(标签名)
var _ = function(selector){
    // console.log(selector); //字符串
    // 通过类名获取元素
    if(selector.indexOf(".") >-1){ // .box
        var s1 = selector.slice(1);// box   
        return document.getElementsByClassName(s1)[0];
    }else 
    // 通过ID名获取元素
    if(selector.indexOf("#") > -1){ //#demo
        var s1 = selector.slice(1);// demo
        return document.getElementById(s1);
    }
    // 通过标签名获取元素
    else {// div
        return document.getElementsByTagName(selector)[0];
    }
}

// 方法2：设置页面元素样式
var _css = function(selector ,property, value){
    // 记录dom元素
    var el = _(selector);
    // 判断property是否为字符串
    if(typeof property == "string"){
        // 处理属性值
        var v1 = typeof value == "number" ? value +"px": value;
        // 设置样式
        el.style[property] = v1;
    }else {
        // 如果property是个对象
        for(var key in property){
            // 处理属性值
            var v2 = typeof property[key] == "number" ? property[key] +"px": property[key];
            // 设置el的样式
            el.style[key] = v2 ;
        }
    }
}

// 方法3：设置页面元素的类名
// <div class="box"></div>
// <div class="box active"></div>
// 添加类名
var  _addClass = function(selector,cName){
     // 记录dom元素
     var el = _(selector);
     // 获取el原有的类名
     var cName_str = el.className;
     // 字符串拼接
     cName_str += " "+cName;
     // 设置类名
     el.className = cName_str;
}
// <div class="box active"></div>
// <div class="box"></div>
// 移除类名
var  _removeClass = function(selector,cName){
      // 记录dom元素
      var el = _(selector);
      // 获取el原有的类名
      var cName_str = el.className;
      // 切割字符串
      var arr = cName_str.split(" ");
      // 循环数组
      var str = "";
      for(var i = 0 ; i < arr.length ; i ++){
            if(cName == arr[i]){
                continue;
            }
            str +=arr[i]+" "
      }
      // 移除最后一个空格字符
      str = str.slice(0,str.length-1)
      //console.log(str);
      // 设置类名
      el.className = str;
}

// 方法4：设置页面元素的文本
// 超文本
var _html = function(selector,html){
    // 记录dom元素
    var el = _(selector);
    // 设置元素的超文本
    el.innerHTML = html;
}
// 纯文本
var _text = function(selector,text){
    // 记录dom元素
    var el = _(selector);
    // 设置元素的超文本
    el.innerText = text;
}